<!DOCTYPE html>
<html>
<head>
    <title>安置分配管理</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row  layui-col-space10">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">一、用户基本信息</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-col-xs6">
                            账号：${(userInfo.username)!}
                        </div>
                        <div class="layui-col-xs6">
                            角色：${(roles)!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">二、项目权限分配</div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <input type="hidden" id="townName" name="townName"/>

                        <div class="layui-form-item">
                        <#if townList??>
                            <#list townList as town>
                                <button type="button" class="layui-btn townClick"
                                        townName="${town}">${(townMap[town])!"/"}</button>
                            </#list>
                        </#if>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <div id="LAY-auth-tree-index"></div>
                            </div>
                        </div>

                        <button style="display: none;" class="layui-btn" id="submitBtn" name="submitBtn" lay-submit=""
                                lay-filter="submit">立即提交
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script>
    layui.extend({
        authtree: '/layui/extend/authtree'
    }).use(['form', 'jquery', 'authtree'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var authtree = layui.authtree;
        var parentIndex = parent.layer.getFrameIndex(window.name);

        $(".townClick").click(function () {
            var obj = $(this);
            var townName = obj.attr("townName");
            $("#townName").val(townName);
            $(".townClick").removeClass("layui-btn-danger");
            obj.addClass("layui-btn-danger");
            getMemu("${(userInfo.id)!}", townName);
        });

        function getMemu(userInfoId, townName) {
            $.ajax({
                url: 'memuJson',
                dataType: 'json',
                data: {userInfoId: userInfoId, townName: townName, _time: new Date().getTime()},
                success: function (data) {
                    // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
                    var list = data.list;
                    var checkedIds = data.checkedIds;
                    var trees = authtree.listConvert(list, {
                        primaryKey: 'id'
                        , startPid: 0
                        , parentKey: 'pid'
                        , nameKey: 'name'
                        , valueKey: 'id'
                        , checkedKey: checkedIds//自动匹配已选元素
                    });
                    authtree.render('#LAY-auth-tree-index', trees, {
                        inputname: 'authids[]'
                        , layfilter: 'lay-check-auth'
                        , dbltimeout: 120
                        , openall: false
                        , checkSkin: 'primary'
                        , autowidth: true
                    });
                    // 使用 authtree.on() 不会有冒泡延迟
                    authtree.on('change(lay-check-auth)', function (data) {
                        // 获取所有已选中节点
                        var checked = authtree.getChecked('#LAY-auth-tree-index');
                        console.log('checked', checked);
                    });
                },
                error: function (xml, errstr, err) {
                    layer.alert(errstr + '，获取样例数据失败，请检查是否部署在本地服务器中！');
                }
            });
        }

        //父页面通过submit按钮click方法，触发以下验证功能
        form.on('submit(submit)', function (data) {

            var authids = authtree.getChecked('#LAY-auth-tree-index');
            data.field.authids = authids.join(",");
            var userInfoId = "${(userInfo.id)!}";
            data.field.userInfoId = userInfoId;

            $.ajax({
                url: "saveAzProjectNamePermission"
                , type: "post"
                , data: data.field
                , success: function (data) {
                    if (data.code == "0001") {
                        layer.alert("配置成功！");
                        parent.loadData();
                        parent.layer.close(parentIndex);
                    } else {
                        layer.msg(data.message, {anim: 6, icon: 2});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>